
<template>
    <div class="content">
        <div class="header-brns">
            <div class="left" @click="goRegister">
                <img src="../assets/imgs/home-addr@2x.png"> <span>{{position.city}}</span>
                <i class="iconfont iconxiajiantou"></i>
            </div>
            <div class="middle">娱乐商城</div>
            <div class="right">
                <a class="search"  @click="goRegister">
                    <img src="../assets/imgs/home-search@2x.png">
                </a>
                <a  class="search"  @click="goRegister">
                    <img src="../assets/imgs/home-msg@2x.png">
                </a>
            </div>
        </div>
        <div class="top-banner">
            <swiper class="swiper" :show-dots="false" :auto="true" :interval="interval" :duration="duration" :loop="true">
                <swiper-item v-for="(item,index) in banner" :key="index">
                    <div class="swiper-item">
                        <a @click="goRegister">
                            <img :src="item.img">
                        </a>
                    </div>
                </swiper-item>
            </swiper>
        </div>
        <div class="home-tabs">
            <swiper class="swiper" dots-position="center" :show-dots="true" :interval="interval">
                <swiper-item v-for="(item,index) in parseInt((serviceType.length-1)/8)+1" :key="index">
                    <div class="tab-card">
                        <a  v-for="(item1,index1) in serviceType" :key="index1" v-if="index1>=index *8 && index1<(index+1) *8"  @click="goRegister">
                            <img v-bind:src="item1.img">
                            <span>{{item1.name}}</span>
                        </a>
                    </div>
                </swiper-item>
            </swiper>
        </div>
        <div class="cards">
            <div  class="card" v-for="(item,index) in cards"  :key="index" @click="goRegister">
                <img :src="item.img">
                <div class="msg">
                    <div>{{item.name}}</div>
                </div>
            </div>
        </div>
        <div class="nav-top">
            <div :class="{'active':tabIndex == 0}" @click="changeTab(0)">综合排序
                <i class="iconfont "></i>
                <i class="iconfont iconxiajiantou"></i>
            </div>
            <div :class="{'active':tabIndex == 1}" @click="changeTab(1)">销量</div>
            <div :class="{'active':tabIndex == 2}" @click="changeTab(2)">
                <i class="iconfont iconfujin2"></i>
                附近
            </div>
            <ul class="second-nav" v-if="tabIndex == 0 && showSecondNav">
                <li :class="{'second-active':secondIndex == 0}"  @click="changeSecondTab(0)">评分最高</li>
                <li :class="{'second-active':secondIndex == 3}" @click="changeSecondTab(3)">最新商家</li>

            </ul>
        </div>
        <div v-for="(item,index) in goodsList" :key="index"  @click="goRegister" v-if="index < 20">
            <div class="card-list">
                <div class="shop-logo">
                    <img v-bind:src="item.main_img">
                </div>
                <div class="shop-msg">
                    <div class="shop-title">{{item.name}}</div>
                    <div class="shop-tips">{{item.business_label}}</div>
                    <div class="shop-labels">
                        <div v-for="(item2,index2) in item.goods_label" :key="item2.index">{{item2.label}}</div>
                    </div>
                    <div class="prices">
                        <div class="price">￥<span>{{item.price}}</span></div>
                        <div class="buy-num">{{item.sale_amount}}人付款</div>
                    </div>
                    <div class="shop-name">{{item.business_name}} <span>距离{{item.distance}}km</span></div>
                </div>
            </div>
        </div>
        <div class="backToTop" v-show="showBackTop" @click="backToTop">
            <i class="iconfont iconhuidaodingbu"></i>
        </div>
        <div v-transfer-dom>
            <loading :show="showLoading" :text="progress"></loading>
        </div>
    </div>
</template>

<script>
    import { Swiper, SwiperItem,Loading,TransferDomDirective as TransferDom } from 'vux'
    import $ from 'jquery'
    let map,timer;
    let geolocation;
    export default {
        directives: {
            TransferDom
        },
        components: {
            Swiper, SwiperItem,Loading
        },
        data() {
            return {
                cards:[{name:'新人大礼包',img:require('../assets/imgs/gift.png'),url:'/newCoupon'},
                    {name:'邀请好友',img:require('../assets/imgs/invite.png'),url:'/invite'},
                    {name:'兼职技师类',img:require('../assets/imgs/card0.png'),url:'/goodList?type=13'},
                    {name:'综合娱乐类',img:require('../assets/imgs/card1.png'),url:'/goodList?type=16'}],
                interval: 2000,
                duration: 500,
                tabIndex:0,
                secondIndex:0,
                secondTab:1,
                showSecondNav:false,
                banner:[],//轮播图
                serviceType:[],
                isActive:true,
                goodsList:[],
                position:{},
                now_page:1,
                total_page:1,
                screenHight:'',//屏幕高度
                isLoad:true,
                showBackTop:false,
                showLoading:false,
                progress:''//下载进度
            }
        },
        mounted(){
            this.getBanner();
            this.getService();
            this.autoGetPosition();
            if(this.$store.state.now_city_name){
                this.position.city = this.$store.state.now_city_name;
                this.position.point = this.$store.state.now_city_postion;
                this.getGoodsList(this.tabIndex+1);

            }else{
                timer = setInterval(()=>{
                    this.position.city = this.$store.state.now_city_name;
                    if(this.position.city){
                        this.position.point = this.$store.state.now_city_postion;
                        this.getGoodsList(this.tabIndex+1);
                        clearInterval(timer)
                    }
                },50);
            }

            this.screenHight = sessionStorage.getItem('screenHight');
            window.addEventListener('scroll', this.handleScroll);
        },
        methods: {
            goRegister(){
              this.$router.replace({
                  path:'/'
              })
            },
            //自动获取定位
            autoGetPosition(){
                this.$vux.loading.show();
                geolocation = new qq.maps.Geolocation("JU7BZ-NDJKF-IMVJM-JMGET-6BMI3-N2BEC", "myapp")
                geolocation.getLocation(this.showPosition, this.locationError)
            },
            locationError(error){
                this.$vux.loading.hide();
                this.$toast("定位失败");
                this.defaultPosition();
            },
            defaultPosition(){
                let addrObj = {
                    lat:31.23677,
                    lng:121.50032
                };
                this.$store.commit('changeCity','上海市');
                this.$store.commit('autoPosition',addrObj);
            },
            //定位
            showPosition(position)
            {
                this.$vux.loading.hide();
                this.$store.commit('changeCity',position.city);
                this.$store.commit('autoPosition',{
                    lat:position.lat,
                    lng:position.lng
                });
            },
            //回到顶部
            backToTop(){
                $("html,body").animate({scrollTop:"0px"}, 100);
            },
            //滚动加载
            handleScroll(){
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                if(this.now_page < this.total_page){
                    let homeHight = $('.content').innerHeight();
                    let h = Number(scrollTop) + Number(this.screenHight) + 1000;
                    if(h -  homeHight > 0 && this.isLoad){
                        this.isLoad = false;
                        this.now_page +=1;
                        this.getGoodsList(this.tabIndex+1);
                    }
                    if(Number(scrollTop) > 300){
                        this.showBackTop = true
                    }else{
                        this.showBackTop = false
                    }
                }
                if(Number(scrollTop) > 300){
                    this.showBackTop = true
                }else{
                    this.showBackTop = false
                }
            },
            //获取服务类型
            getService(){
                this.$http.post('common/getCategory',{}).then((res)=>{
                    this.serviceType = res.data;
                })
            },
            //获取轮播图
            getBanner(){
                this.$http.post('common/getBanner',{}).then((res)=>{
                    this.banner = res.data;
                })
            },
            //获取商品列表
            getGoodsList(index,flag){
                let params = {
                    sort_type:index,
                    now_page:this.now_page,
                    city_name:this.position.city
                }
                params.latitude = this.position.point.lat;
                params.longitude = this.position.point.lng;
                this.$http.post('common/getGoodsBySort',params).then((res)=>{
                    if(flag){
                        this.goodsList = [];
                    }
                    this.goodsList = this.goodsList.concat(res.data.list);
                    this.total_page = res.data.total_page;
                    this.isLoad = true;
                    this.$vux.loading.hide()
                })
            },
            //切换一级选项卡
            changeTab(index){
                this.tabIndex = index;
                this.now_page = 1;
                this.total_page = 1;
                if(index == 0){
                    if(this.secondTab == 1){
                        this.showSecondNav = true;
                        this.secondTab += 1;
                    }else if(this.secondTab == 2){
                        this.showSecondNav = false;
                        this.secondTab = 1;
                    }else{
                        this.secondTab = 0;
                        this.showSecondNav = false;
                    }
                    // if(this.secondTab == 2){
                    //     this.showSecondNav = true
                    // }
                }else{

                }
                this.getGoodsList(Number(index)+1,true)
            },
            //切换二级级选项卡
            changeSecondTab(index){
                this.now_page = 1;
                this.total_page = 1;
                this.secondIndex = index;
                this.getGoodsList(index+1,true);
                this.showSecondNav = false;
            }
        },
        beforeDestroy() {
            this.$vux.loading.hide();
            this.autoGetPosition();
            window.removeEventListener('scroll', this.scrollToTop);
            clearInterval(timer);
        }
    }
</script>

<style lang="less" scoped>
    .content{
        padding-top: 44px;
        padding-bottom: 55px;
        background: white;
        .header-brns{
            position: fixed;
            top: 0;
            height: 44px;
            width: 100%;
            padding: 0 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            box-sizing: border-box;
            background: white;
            &>div{
                display: flex;
                align-items: center;
                width: 33%;
            }
            .left span{
                display: inline-block;
                max-width: 60px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .middle{
                display: flex;
                justify-content: center;
                font-size: 16px;
            }
            .right{
                display: flex;
                justify-content: flex-end;
                a{
                    padding: 5px;
                    margin-top: 5px;
                }
            }
            span{
                font-size: 15px;
                color:#666;
                margin: 0 5px;
            }
            img{
                width:18px;
                margin-left: 5px;
            }

        }
        .backToTop{
            position: fixed;
            right:15px;
            bottom:60px;

            i{
                font-size: 40px;
                color:#fa6183;
            }
        }
        .top-banner{
            .swiper{
                /deep/.vux-swiper{
                    height: 155px !important;
                }
            }
        }
        .home-tabs{
            .swiper{
                /deep/.vux-swiper{
                    height: 190px !important;
                }
            }
        }
        .swiper-item{
            width: 100%;
            height:100%;

        }
        .swiper-item img{
            width: 100%;
            height: 100%;
        }
        .tab-card{
            padding:0 0 15px;
            display: flex;
            flex-wrap: wrap;

        }
        .tab-card>a{
            width: 25%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 8px;

        }
        .tab-card img{
            width: 53px;
            height:53px !important;
            margin-bottom: 3px;
        }
        .tab-card span{
            font-size: 14px;
        }
        .cards{
            padding:0 10px 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .card{
            width: 158px;
            margin-right:10px;
            margin-bottom:10px;
            box-sizing: border-box;
        }
        .card:nth-child(2n){
            margin-right:0 ;
        }
        .card img{
            width: 100%;
            height:90px !important;
            border-radius: 7px;
        }
        .card .msg{
            padding: 5px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }
        .card .msg>div{
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            span-overflow: ellipsis;
            font-size: 12px;
            font-weight: bold;
        }
        .nav-top{
            width: 100%;
            box-sizing: border-box;
            padding: 8px 15px 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            border-bottom: 3px solid #f2f2f2;
            margin-bottom:10px;
            position: relative;
            &>div{
                font-size: 15px;
                padding: 0 8px;
                color:#666;
                display: flex;
                align-items: center;
                img{
                    width: 20px;
                    margin: 0 5px;
                }
            }
            .second-nav{
                position: absolute;
                top:36px;
                left: 0;
                width: 100%;
                height: 45px;
                display: flex;
                align-items: center;
                padding: 0 15px;
                box-sizing: border-box;
                background: white;
                border-bottom: 1px solid #eee;
                li{
                    padding: 3px 10px;
                    border-radius: 5px;
                    border:1px solid #aaa;
                    margin-right: 10px;
                    color:#333;
                }
                .second-active{
                    background: #fa6183;
                    color:white;
                    border-color:#fa6183;
                }
            }
            .active{
                color:#f86d1a;
            }
        }
        .card-list{
            width: 351px;
            margin: 0 auto 7px;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }
        .shop-logo img{
            width: 135px;
            height: 125px;
            border-radius: 10px;
        }
        .shop-msg{
            width: 195px;
        }
        .shop-title{
            height: 20px;
            font-size: 14px;
            letter-spacing: 1px;
            color: #464646;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .shop-tips{
            font-size: 11px;
            letter-spacing: 1px;
            color: #8b8b8b;
            margin: 5px 0;
        }
        .shop-labels{
            display: flex;
            margin: 10px 0 5px;
        }
        .shop-labels div{
            width: 59px;
            background: pink;
            display: inline-block;
            color:white;
            font-size: 12px;
            margin-right: 10px;
            padding: 2px 0;
            border-radius: 10px;
            text-align: center;
        }
        .prices{
            display: flex;
            align-items: center;
        }
        .price{
            font-size: 15px;
            letter-spacing: 1px;
            color: #f86d1a;
            margin-right:10px;
        }
        .price span{
            font-size: 11px;
        }
        .buy-num{
            font-size: 11px;
            letter-spacing: 1px;
            color: #464646;
        }
        .buy-num span{
            margin-left:10px;
        }
        .shop-name{
            font-size: 11px;
            letter-spacing: 1px;
            color: #464646;
            display: flex;
            justify-content: space-between;
        }
    }

</style>
